<template>
  <div class="label-box-content">
    <el-row :gutter="20" type="flex">
      <el-col style="position: relative" :span="15">
        <NewCard title="项目类别">
          <el-tree
            :data="typeList"
            :props="defaultProps"
            :highlight-current="true"
            @node-click="clickTree"
          >
            <span slot-scope="{ node, data }">
              <span class="tree-add" :class="data.children ? '' : 'is-leaf'"
                ><svg-icon icon-class="add-icon"
              /></span>
              <span class="tree-minus" :class="data.children ? '' : 'is-leaf'"
                ><svg-icon icon-class="minus-icon"
              /></span>
              <span>{{ node.label }}</span>
            </span>
          </el-tree>
          <!-- 底部按钮 -->
          <div class="bottomBtn">
            <el-button @click="clickAddBtn">+添加项目类型</el-button>
          </div>
          <!-- <AddBtn label="添加项目类型"></AddBtn> -->
        </NewCard>
      </el-col>
      <el-col :span="9">
        <NewCard style="flex: 1" :title="addOrEdit?'新增':'编辑'">
          <el-form
            ref="form"
            :model="editform"
            label-width="120px"
            label-position="left">
            <el-form-item label="项目类别">
              <el-radio-group v-model="editform.type" :disabled="!addOrEdit" @change="changeRadioType">
                <el-radio label="1">一级</el-radio>
                <el-radio label="2">二级</el-radio>
                <el-radio label="3">三级</el-radio>
              </el-radio-group>
            </el-form-item>

            <!-- 一级类别 -->
            <el-form-item label="一级类别" v-if="addOrEdit && editform.type == '2'">
              <el-select v-model="editform.pid" placeholder="请选择">
                <el-option v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

            <!-- 一级类别 -->
            <el-form-item label="一级类别" v-if="addOrEdit && editform.type == '3'">
              <el-select v-model="oneLevelList" placeholder="请选择" @change="changeOneLevel">
                <el-option v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

            <!-- 二级类别 -->
            <el-form-item label="二级类别" v-if="addOrEdit && editform.type == '3'">
              <el-select v-model="editform.pid" placeholder="请选择">
                <el-option v-for="(item,index) in secondLevelList" :key="index" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="类别名称">
              <el-input v-model="editform.name" :disabled="!addOrEdit && editform.type == '1'" :maxlength="editform.type == '3'?'30':'10'" :placeholder="editform.type == '3'?'请输入名称，不超过30个字符':'请输入名称，不超过10个字符'"></el-input>
            </el-form-item>

            <el-form-item label="聊天室时长(天)" v-if="editform.type == '3'">
              <el-input v-model.number="editform.cancelTime" placeholder="请输入订单完成后聊天室的可沟通时长"></el-input>
            </el-form-item>

            <el-form-item 
              :label="editform.type == '1'?'专家要求':'类型描述'" 
              v-if="editform.type == '1' || editform.type == '3'">
              <el-input
                v-model="editform.describable"
                type="textarea"
                rows="8"
                resize="none"
                maxlength="200" placeholder="请输入名称，不超过200个字符"
              ></el-input>
            </el-form-item>

            <!-- 一级类型下的 区域限制 -->
            <el-form-item label="区域限制" v-if="editform.type == '1'">
              <el-radio-group v-model="editform.areaType" @change="changeAreaType">
                <!-- 0海外1全国2省3市4区县 -->
                <el-radio label="1">无限制</el-radio>
                <el-radio label="3">市</el-radio>
                <el-radio label="4">镇/区</el-radio>
              </el-radio-group>
            </el-form-item>

            <!-- 一级类型下的 选择市 无限制和镇不可选 cityCode -->
            <!-- 无限制和镇不可选 选择市 -->
            <!-- <el-form-item label="运营地区" v-if="editform.type == '1'">
              <el-input v-model="noSelectValue" placeholder="无需选择" disabled v-if="editform.areaType == '1'"></el-input>
              <el-input v-model="noSelectValue" placeholder="需要至该一级类型下的三级类型选择" disabled v-if="editform.areaType == '4'"></el-input>
              <el-cascader
                size="large"
                :options="cityOptions"
                :props="optionProps"
                v-model="selectedOptions"
                :show-all-levels="false"
                placeholder="选择运营地区"
                @change="changeCity"
                v-if="editform.areaType == '3'"
              >
              </el-cascader>
            </el-form-item> -->

            <!-- 三级类型下的 区域限制 -->
            <el-form-item label="区域限制" v-if="editform.type == '3'">
              <!-- 0海外1全国2省3市4区县 -->
              <el-radio label="1" v-model="oneAreaTypeValue" v-if="oneAreaType == '1'">无限制</el-radio>
              <el-radio label="1" v-model="oneAreaTypeValue" v-if="oneAreaType == '3'">市</el-radio>
              <el-radio label="1" v-model="oneAreaTypeValue" v-if="oneAreaType == '4'">镇/区</el-radio>
            </el-form-item>

            <!-- 三级类型下的 常见问答 -->
            <el-form-item label="常见问答" v-if="editform.type == '3'">
              <el-button type="text" class="editQaBtn" @click="editQaDrawer=true"><i class="el-icon-edit"></i> 编辑问答</el-button>
            </el-form-item>

            <!-- 三级类型下的 无限制和市不可选 镇可以选 cityCode -->
            <!-- <el-form-item label="运营城市" v-if="editform.type == '3'&&oneAreaType == '4'">
              <el-cascader
                size="large"
                popper-class="selectArea"
                :options="areaOptions"
                :props="areaOptionProps"
                v-model="selectedOptions"
                placeholder="选择城市"
                @change="changeArea"
              >
              </el-cascader>
            </el-form-item> -->

            <!-- ***************上传图标的*************** -->
            <!-- PC未选中图标 和 PC选中图标-->
            <!-- <el-form-item label="PC端图标" v-if="editform.type == '1'">
              <div class="icon-box">
                <el-upload
                  :auto-upload="false"
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :on-change="getBase64PCUESFn">
                  <img
                    v-if="editform.icon1"
                    :src="editform.icon1"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <p>未选中状态</p>
              </div>
              <div class="icon-box">
                <el-upload
                  :auto-upload="false"
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :on-change="getBase64PCESFn">
                  <img
                    v-if="editform.icon2"
                    :src="editform.icon2"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <p>选中状态</p>
              </div>
            </el-form-item> -->

            <el-form-item label="移动端图标" v-if="editform.type == '1'">
              <div class="icon-box">
                <!-- 移动端未选中图标 -->
                <el-upload
                  :auto-upload="false"
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :on-change="getBase64MUESFn">
                  <img
                    v-if="editform.mIcon1"
                    :src="editform.mIcon1"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <p>未选中状态</p>
              </div>

              <div class="icon-box">
                <!-- 移动端选中图标 -->
                <el-upload
                  :auto-upload="false"
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :on-change="getBase64MESFn">
                  <img
                    v-if="editform.mIcon2"
                    :src="editform.mIcon2"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <p>选中状态</p>
              </div>

            </el-form-item>

            <el-form-item
              label="分类图标"
              v-if="editform.type == '2' || editform.type == '3'">
              <el-upload
                :auto-upload="false"
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :on-change="getBase64PCUESFn">
                <img
                  v-if="editform.icon1"
                  :src="editform.icon1"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <!-- ***************上传图标的*************** end-->

            <el-form-item label="状态">
              <el-radio-group v-model="editform.status">
                <el-radio label="0">开启</el-radio>
                <el-radio label="1">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>

          <SubBtn v-hasPermi="['work:projectType:edit']">
            <template slot="btn">
              <el-button round @click="resetForm">重设</el-button>
              <el-button type="primary" round @click="saveForm" :disabled="!isCheck" v-hasPermi="['work:projectType:add']">保存</el-button>
            </template>
          </SubBtn>
        </NewCard>
      </el-col>
    </el-row>

    <!-- 编辑问答抽屉 -->
    <el-drawer
      :title="`${editform.name}常见问答`"
      size="40%"
      :visible.sync="editQaDrawer">
        <EditQa :selectType="editform" :editQaDrawer.sync="editQaDrawer"></EditQa>
    </el-drawer>
  </div>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import AddBtn from "./addBtn.vue";
import SubBtn from "@/wss/components/subBtn.vue";
import EditQa from "./editQa.vue"

//引入省市区数据的插件 
// provinceAndCityData是省市二级联动数据（不带“全部”选项） regionData是省市区三级联动数据（不带“全部”选项）
import { provinceAndCityData, regionData, CodeToText } from "element-china-area-data";

import {
  getProjectTypelistApi,
  addProjectTypeApi,
  editProjectTypeApi,
} from "@/wss/newApi_3-24/work/projectType.js";
import { changeBase64Fn, changeFileToURLFn, inAreaCodeClass } from "@/wss/utils/wss.js";
import { constantBmRoutes } from "@/router";
import debounce from "lodash/debounce";

//
export default {
  name: "Category",
  components: { NewCard, AddBtn, SubBtn, EditQa },
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
      },

      addOrEdit: true,//当前是新增还是编辑 true新增状态  false编辑状态
      typeList: [], //项目类别的数据  

      // -----------------------------选择城市和镇区-----------------------------
      cityOptions: provinceAndCityData,//选择市
      areaOptions: provinceAndCityData,//选择镇
      selectedOptions:[],//选择完成后的数据集合
      //运营地区 配置项
      optionProps:{
        multiple: true,
        value: 'value',
        label: 'label',
        children: 'children'
      },
      noSelectValue: '',

      // 选择镇区的配置项
      areaOptionProps:{
        // multiple: true, 
        checkStrictly: false, 
        multipleLimit: 3, 
        children: 'children', 
        value: 'value', 
        lable: 'lable'
      },

      oneAreaType: '',//当前点击的一级区域限制  0海外1全国2省3市4区县
      oneAreaTypeValue: '1',//选中三级的
      newAreaSelect: [],//最新选中的那个值
      // -----------------------------选择城市和镇区----------------------------- end

      //添加的一个项目数据
      addfrom: {
        name: "",
        type: "1",
        pid: "1",
      },

      //编辑表单
      editform: {
        pid: "1",
        type: "1",
        name: "",
        cancelTime: "",
        describable: "",
        areaType:"1", //默认无限制
        cityCode:"",
        status: "0",
        icon1: "",
        icon1base64: "",
        icon1format: "",
        icon2: "",
        icon2base64: "",
        icon2format: "",
        mIcon1: "",
        mIcon1base64: "",
        mIcon1format: "",
        mIcon2: "",
        mIcon2base64: "",
        mIcon2format: "",
      },

      //保存重设的数据
      resetDate: {},

      oneLevelList:'', // 添加三级分类的时候 当前选中的一级类别
      secondLevelList:[], // 添加三级分类的时候 当前选中的一级类别过滤出来的二级类别

      isCheck: true,// 判断当前点击保存是否已经返回请求

      editQaDrawer: false,//编辑问答显示隐藏
    };
  },
  beforeDestroy(){
    // 解绑$bus
    this.$bus.$off("Event-blurInput")
    this.$bus.$off("sendProjectQaList")
  },
  mounted() {
    this.getProjectTypeListFn(); // 获取项目类型
    
    //添加项目类别
    this.$bus.$on("Event-blurInput", (inputValue) => {
      this.addfrom.name = inputValue;
      this.addProjectType(); //添加一个项目
    });

    // 获取传过来的问答列表
    this.$bus.$on('sendProjectQaList',(list)=>{
      // 添加projectQaList这个字段
      this.$set(this.editform, 'projectQaList', list)
    })
  },
  watch:{
    // 监听选择城市的集合，拿到最新的那个
    selectedOptions:{
      handler(newValue,oldValue){
        let res = newValue.filter(item => !oldValue.some(ele=> ele === item))
        this.newAreaSelect = res
      },
      sync: true,//先触发watch，在执行methods中的方法
    },
  },
  methods: {
    // 获取项目类型
    async getProjectTypeListFn() {
      let type = 6;
      let { code, rows } = await getProjectTypelistApi();
      if (code != 200) return;
      this.typeList = JSON.parse(JSON.stringify(rows));
      this.secondLevelList = this.typeList[0].children //过滤出二级类别
    },

    // 添加项目类型
    async addProjectType() {
      // let projectTypeVo = this.addfrom;
      let result = await addProjectTypeApi(this.editform);
      if (result.code == 200) {
        this.$message({
          message: "添加成功！",
          type: "success",
        });
        // 清除数据
        this.editform = {
          pid: "",
          type: "1",
          name: "",
          describable: "",
          areaType:"1",
          cityCode:"",
          status: "0",
          cancelTime:'',
          icon1: "",
          icon1base64: null,
          icon1format: null,
          icon2: "",
          icon2base64: null,
          icon2format: null,
          mIcon1: "",
          mIcon1base64: null,
          mIcon1format: null,
          mIcon2: "",
          mIcon2base64: null,
          mIcon2format: null,
        };
        this.oneLevelList='' // 清空 添加三级分类的时候 当前选中的一级类别
        this.getProjectTypeListFn(); // 刷新项目类型
      } else {
        this.$message.error("操作失败!");
      }
    },

    //点击树形结构 获取当前点击的是1一级类别 2二级类别 3二级类别
    clickTree(data) {
      this.addOrEdit = false //false编辑状态
      //切换之前清空表单数据内容
      this.editform = {
        pid: "",
        type: "1",
        name: "",
        describable: "",
        areaType:"1",
        cityCode:"",
        status: "0",
        cancelTime:'',
        icon1: "",
        icon1base64: null,
        icon1format: null,
        icon2: "",
        icon2base64: null,
        icon2format: null,
        mIcon1: "",
        mIcon1base64: null,
        mIcon1format: null,
        mIcon2: "",
        mIcon2base64: null,
        mIcon2format: null,
      };
      this.oneLevelList='' // 清空 添加三级分类的时候 当前选中的一级类别

      //如果是点击的是一级要加的是二级，如果是二级或者是三级要加的是三级
      if (data.type == "1") {
        this.addfrom.type = "2";
        this.addfrom.pid = data.id;
        //获取当前点击的一级区域限制
        if(data.areaType){
          this.oneAreaType = data.areaType
        }else{
          this.oneAreaType = ''
        }
      } else if (data.type == "2") {
        this.addfrom.type = "3";
        this.addfrom.pid = data.id;
      } else {
        this.addfrom.type = "3";
        this.addfrom.pid = data.pid;
      }
      // 合并对象
      let newObj = Object.assign(this.editform, data);
      //修改的表单
      this.editform = newObj;
      //保存重设的数据 把数组先保存起来，重设的时候还原旧数据
      this.resetDate = JSON.parse(JSON.stringify(newObj));
      // this.editform = data

      // 二级和三级的话 获取一级的区域限制
      if(this.editform.type == '2' || this.editform.type == '3'){
        this.editform.areaType = this.oneAreaType
      }

      // 回显之前清空之前的数据
      this.selectedOptions = []
      // 回显城市的数据
      if(this.editform.cityCode){
        if(this.editform.type == '1'){
          // 这里是选择的市区的数据回显
          let arr = this.editform.cityCode.split(',')
          arr.forEach(item=>{
            let ctry = []
            ctry.push(`${item.substring(0,2)}0000`)
            ctry.push(item)
            this.selectedOptions.push(ctry)
          })
        }else if(this.editform.type == '3'){
          // 这里是选择的镇区的数据回显
          let arr = this.editform.cityCode.split(',')
          arr.forEach(item=>{
            let ctry = []
            ctry.push(`${item.substring(0,2)}0000`)
            ctry.push(`${item.substring(0,4)}00`)
            ctry.push(item)
            this.selectedOptions.push(ctry)
          })
        }
      }
    },

    // 修改区域限制的时候
    changeAreaType(){
      
    },

    // 选择城市的数据的时候
    changeCity(){
      // 城市数据的集合
      let codeList = []
      this.selectedOptions.forEach(item=>{
        codeList.push(item[item.length-1])
      })
      this.editform.cityCode = codeList.join(',')
    },

    // 选择镇区的时候
    changeArea(){
      this.editform.cityCode = this.selectedOptions[1]
      return
      // 只能选择一个城市的数据，在选择的时候把其他城市的数据清掉，只保留最新一个城市的镇区数据
      if(this.newAreaSelect.length>0){
        let lastCode = this.newAreaSelect[0][1]
        let newSelected = this.selectedOptions.filter(item=>{
          return item[1] == lastCode
        })
        // 把过滤出来只剩下最后一个城市的数据赋值给选择的数据
        this.selectedOptions = newSelected
      }

      // 获取城市数据的集合
      let codeList = []
      this.selectedOptions.forEach(item=>{
        codeList.push(item[item.length-1])
      })
      this.editform.cityCode = codeList.join(',')
    },

    // *****上传图标的回调**********************
    // Pc未选中的图标
    getBase64PCUESFn(item) {
      console.log(item);
      // let editform = this.editform;
      this.editform.icon1 = changeFileToURLFn(item.raw);
      this.getBase64(item.raw).then((res) => {
        const params = res;
        this.editform.icon1base64 = params.split(",")[1];
      });
      this.editform.icon1format = "." + item.name.split(".")[1];
    },

    // Pc选中的图标
    getBase64PCESFn(item) {
      console.log(item);
      // let editform = this.editform;
      this.editform.icon2 = changeFileToURLFn(item.raw);
      this.getBase64(item.raw).then((res) => {
        const params = res;
        this.editform.icon2base64 = params.split(",")[1];
      });
      this.editform.icon2format = "." + item.name.split(".")[1];
    },

    // 移动端未选中的图标
    getBase64MUESFn(item) {
      // let editform = this.editform;
      this.editform.mIcon1 = changeFileToURLFn(item.raw);
      this.getBase64(item.raw).then((res) => {
        const params = res;
        this.editform.mIcon1base64 = params.split(",")[1];
      });
      this.editform.mIcon1format = "." + item.name.split(".")[1];
    },

    // 移动端选中的图标
    getBase64MESFn(item) {
      // let editform = this.editform;
      this.editform.mIcon2 = changeFileToURLFn(item.raw);
      this.getBase64(item.raw).then((res) => {
        const params = res;
        this.editform.mIcon2base64 = params.split(",")[1];
      });
      this.editform.mIcon2format = "." + item.name.split(".")[1];
    },

    // 图片转base64编码：
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
    // *****上传图标的回调**********************end

    // 改变一级 二级 三级 单选框的时候
    changeRadioType(){
      if(this.editform.type == '2' || this.editform.type == '3'){
        this.editform.pid = ''
      }else{
        this.editform.pid = '1'
      }
    },

    // 点击添加项目类型
    clickAddBtn(){
      this.addOrEdit = true //true新增状态

      //初始化表单数据内容
      this.editform = {
        pid: '1',
        type: '1',
        name: "",
        describable: "",
        areaType:"1",
        cityCode:"",
        status: "0",
        cancelTime:'',
        icon1: "",
        icon1base64: null,
        icon1format: null,
        icon2: "",
        icon2base64: null,
        icon2format: null,
        mIcon1: "",
        mIcon1base64: null,
        mIcon1format: null,
        mIcon2: "",
        mIcon2base64: null,
        mIcon2format: null,
      };
      this.oneLevelList='' // 清空 添加三级分类的时候 当前选中的一级类别
    },

    //编辑类别的接口
    async editProjectType() {
      // console.log(this.editform);

      let result = await editProjectTypeApi(this.editform);
      if (result.code == 200) {
        this.$message({
          message: "编辑成功！",
          type: "success",
        });
      } else {
        this.$message.error("编辑失败!");
      }
    },

    //点击保存按钮的回调
    saveForm: debounce(async function() {
      // 当是三级类别的时候，聊天室时长只能是数字
      if(this.editform.type == '3'){
        if(isNaN(Number(this.editform.cancelTime,10))){
          this.$message({
            message: "聊天室时长只能是数字",
            type: "warning",
          });
          return
        }
      }

      //当是二级的时候，没有类型描述，默认把类型描述等于类别名称
      if(this.editform.type == '2'){
        this.editform.describable = this.editform.name
      }

      // ----------------0海外1全国2省3市4区县----------------
      // 一级分类 三级分类 要把城市数据置空
      if(this.editform.type == '1' || this.editform.type == '3'){
        this.selectedOptions = [] //清除选择的城市
        this.editform.cityCode = '' //清除选择的城市
      }

      // 当前的区域限制是无限制 要把cityCode 改为cn
      if(this.editform.areaType == '1'){
        this.selectedOptions = [] //清除选择的城市
        this.editform.cityCode = 'cn' //清除选择的城市
      }

      // ----------------0海外1全国2省3市4区县----------------end

      if(this.addOrEdit){
        // 当前是新增的时候*****************
        if(!this.editform.name || !this.editform.describable){
          this.$message({
            message: "类别名称或者描述不能为空",
            type: "warning",
          });
        }else{
          this.isCheck = false //先不给点击保存
          await this.addProjectType();//新增接口
          await this.getProjectTypeListFn(); // 刷新项目类型
          this.isCheck = true //可以点击保存了
        }
      }else{
        // 当前是编辑的时候******************
        if (!this.editform.id) {
          this.$message({
            message: "请选择项目类别",
            type: "warning",
          });
        } else {
          if(!this.editform.name || !this.editform.describable){
            this.$message({
              message: "类别名称或者描述不能为空",
              type: "warning",
            });
          }else{
            this.isCheck = false //先不给点击保存
            await this.editProjectType();//编辑接口
            await this.getProjectTypeListFn(); // 刷新项目类型
            this.isCheck = true //可以点击保存了
          }
        }
      }

      // 更新项目路由菜单 ************************
      // 更新项目路由菜单 ************************end
    },1000),

    //重设表单
    resetForm() {
      if (!this.editform.id) {
        //初始化表单数据内容
        this.editform = {
          pid: '1',
          type: '1',
          name: "",
          describable: "",
          areaType:"1",
          cityCode:"",
          status: "0",
          icon1: "",
          icon1base64: null,
          icon1format: null,
          icon2: "",
          icon2base64: null,
          icon2format: null,
          mIcon1: "",
          mIcon1base64: null,
          mIcon1format: null,
          mIcon2: "",
          mIcon2base64: null,
          mIcon2format: null,
        };
        this.oneLevelList='' // 清空 添加三级分类的时候 当前选中的一级类别
      } else {
        // 把保存下来的数据还原成旧数据
        this.editform = JSON.parse(JSON.stringify(this.resetDate))
      }
    },

    // 过滤出当前选中的一级类别下的二级类别
    changeOneLevel(){
      let arr = this.typeList.filter(item=>{
        return item.id == this.oneLevelList
      })
      this.secondLevelList = arr[0].children //二级分类
      if(arr[0].areaType){
        this.oneAreaType = arr[0].areaType //当前点击的一级区域限制
      }else{
        this.oneAreaType = '1' //没有的话默认无限制
      }
    },

  },
};
</script>

<style  scoped>
.label-box-content {
  height: 100%;
}
.el-input-number--mini {
  width: 100px;
}
.el-card >>> .top {
  border-bottom: 0;
  padding-top: 0;
}
.el-card >>> .el-card__body {
  position: relative;
  height: 100%;
}
.el-card >>> .el-card__body > div {
  padding-top: 0 !important;
  height: 92%;
  overflow-y: auto;
}
.el-card >>> .el-card__body > div::-webkit-scrollbar {
  width: 0;
}
.corrExpert .el-card >>> .el-card__body > div {
  overflow-y: initial;
}

.el-row,
.el-card {
  height: 100%;
  margin-bottom: 0;
}
.label-box-content >>> h1 {
  margin: 0;
  padding: 20px 0 15px 0;
  border-bottom: 1px solid #e6ebf5;
}
.label-box-content >>> .top::after {
  height: 0;
}

/* 左侧菜单 */
.leftMenu {
  margin-top: 20px;
}
.el-menu {
  border-right: 0;
}
.el-menu-item {
  height: 44px;
  line-height: 44px;
  border-radius: 4px;
  padding: 0 10px !important;
}
.el-menu-item.is-active {
  background-color: #1890ff;
  color: #fff;
}
.el-menu-item > span {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}
.el-menu-item > span .auditTxt {
  font-size: 13px;
  color: #666;
}
.el-menu-item.is-active .auditTxt {
  color: #eee;
}
.leftMenu .leftSearch {
  position: absolute;
  right: 20px;
  top: 10px;
  z-index: 9;
}
.leftMenu >>> .el-input--medium .el-input__inner {
  width: 95px;
}
.el-menu-item:hover .el-icon-success {
  color: #67c23a;
}
.el-menu-item:hover .el-icon-warning {
  color: #ffba00;
}
/* 左侧菜单 end*/

/* 中间个人信息 */
.infoExpert {
  height: 100%;
}
.el-col-24 {
  margin-top: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e6ebf5;
}
.expertInfoImg {
  display: flex;
  align-items: center;
}
.expertInfoImg h1 {
  border-bottom: 0;
}
.expertInfoImg img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 50%;
}
.expertInfoImg h1 {
  font-weight: bold;
  font-size: 20px;
  margin-left: 20px;
}
.el-descriptions-item__label {
  margin-right: 0;
}
.perInfo >>> .el-descriptions__title {
  font-size: 18px;
}
.el-image {
  width: 250px;
  height: 170px;
  border-radius: 10px;
}
.certTitle {
  font-size: 20px;
}
.workExp {
  margin-top: 10px;
}
.workExp h2 {
  margin-top: 0;
  font-size: 16px;
  font-weight: bold;
}
.workExp h2 > span {
  font-size: 15px;
  font-weight: 400;
  color: #7d7d7d;
}
.workExp i {
  color: #7d7d7d;
  font-size: 13px;
}
.workExp ol {
  padding-left: 20px;
  margin-top: 10px;
}
.workExp li {
  font-size: 14px;
  line-height: 28px;
}
.historyInfo {
  margin-top: 0;
  font-size: 14px;
  line-height: 28px;
}
/* 中间个人信息end */

/* 专家审核 样式 */
.el-select {
  width: 100%;
}
.expertRev {
  margin-top: 20px;
}
.demo-editFormData {
  margin-top: 20px;
  margin-bottom: 60px;
}
.el-form {
  margin-top: 30px;
  margin-bottom: 60px;
}
.el-form .el-cascader{
  width: 100%;
}
.el-form >>> .el-textarea__inner {
  font-family: Microsoft Yahei;
}
.el-form >>> .el-form-item .el-form-item__label {
  padding: 0;
  color: #2e405e;
}
.expertRev >>> .el-form-item__content {
  position: initial;
}

.el-form >>> .el-form-item .el-form-item__content{
  display: flex;
  align-items: center;
  min-height: 36px;
}
.el-form >>> .el-form-item .el-form-item__content .icon-box{
  margin-right: 30px;
}
.el-form >>> .el-form-item .el-form-item__content .icon-box>p{
  margin: 0;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: #2E405E;
}

.expertRev .el-button {
  position: absolute;
  top: 10px;
  right: 20px;
  padding: 8px 10px;
  font-size: 13px;
}
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
::v-deep .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
}
::v-deep .avatar {
  width: 70px;
  height: 70px;
  object-fit: contain;
  display: block;
}
::v-deep .el-tree {
  /* height: 100%; */
  padding-top: 20px;
  margin-bottom: 60px;
  /* overflow: scroll; */
}
::v-deep .el-tree::-webkit-scrollbar {
  width: 0px;
}
::v-deep .el-tree .is-expanded {
  position: relative;
}
::v-deep .el-tree .is-expanded::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 8px;
  display: block;
  width: 1px;
  height: 100%;
  background-color: #ebebeb;
}
::v-deep .el-tree .tree-add,
::v-deep .el-tree .tree-minus {
  position: relative;
  margin-right: 7px;
  background-color: #fff;
  z-index: 1;
}
::v-deep .el-tree .el-tree-node{
  border-bottom: 1px solid #f5f5f5;
}
::v-deep .el-tree .el-tree-node__children .el-tree-node:last-child{
  border-bottom: 0;
}
::v-deep .el-tree .el-tree-node__children .tree-add.is-leaf,
::v-deep .el-tree .el-tree-node__children .tree-minus.is-leaf {
  opacity: 0;
}
::v-deep .el-tree .el-tree-node__children .el-tree-node__children .tree-add,
::v-deep .el-tree .el-tree-node__children .el-tree-node__children .tree-minus {
  opacity: 0;
  margin-right: 0;
}
::v-deep
  .el-tree
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__content {
  padding-left: 43px !important;
}
::v-deep .el-tree .tree-minus {
  display: none;
}
::v-deep .el-tree .is-expanded > .el-tree-node__content > span > .tree-add {
  display: none;
}
::v-deep .el-tree .is-expanded > .el-tree-node__content > span > .tree-minus {
  display: inline-block;
}

::v-deep .el-tree .el-tree-node__content > .el-tree-node__expand-icon {
  padding: 0;
}
::v-deep .el-tree .is-expanded .is-expanded::before {
  left: 25px;
}
::v-deep .el-tree .el-tree-node__content {
  height: 46px;
}
::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content{
  background-color: #f7f7f7;
}
::v-deep .el-tree .el-icon-caret-right:before {
  display: none;
}
::v-deep .el-tree-node__expand-icon.expanded {
  transform: rotate(0deg);
}
::v-deep .el-tree .el-icon-caret-right.is-leaf {
  opacity: 0;
}

/* 右侧样式*/
::v-deep .el-radio__input.is-disabled .el-radio__inner {
  background-color: #fff;
}
::v-deep .el-radio__input.is-disabled + span.el-radio__label {
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  border-color: #f87a23;
  background: #f87a23;
}
::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
  background-color: #fff;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #f87a23;
}

/* 抽屉样式 */
::v-deep .el-drawer__header{
    border-bottom: 1px solid #EFEFEF;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
::v-deep .el-drawer__header>span{
    font-size: 18px;
    font-weight: bold;
    color: #2E3F5E;
    padding-left: 20px;
    background: url('~@/wss/assets/image/icon/cardLeft.png') left center no-repeat;
    background-size: 7px;
}

/* 底部按钮 */
.bottomBtn{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9;
}
.bottomBtn .el-button{
  width: 100%;
  border: 0;
  border-top: 1px solid #ECEDF0;
  background-color: #F8F8F8;
  line-height: 25px;
  color: #606E84;
}

/* 右侧按钮样式 */
::v-deep .subBtn {
  padding: 8px 30px;
}
::v-deep .subBtn .el-button {
  width: 100px;
  padding: 8px 0;
  font-size: 14px;
  color: #606e84;
}
::v-deep .subBtn .el-button--primary {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}
::v-deep .subBtn .el-button--primary:hover {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}
</style>

<style lang="scss">
// 编辑问答样式
.editQaBtn{
  color: #f87a23;
  i{
    margin-right: 5px;
  }
  &:hover{
    color: #f87a23;
  }
  &:focus{
    color: #f87a23;
  }
}

// selectArea是自定义浮层类目
.selectArea{
  .el-cascader-panel {
    .el-scrollbar:first-child {
      .el-checkbox {
        display: none;
      }
    }
    .el-scrollbar:nth-child(2) {
      .el-checkbox {
        display: none;
      }
    }
  }
}
</style>